<template>
  <div class="custom-tree-container">
    <el-button type="mini" @click="onOpen()">添加头节点</el-button>
    <div class="block">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent">
      </el-tree>

      <el-dialog title="添加字典" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="字典编码" label-width="auto">
            <el-input v-model="form.dictCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="字典标签" label-width="auto">
            <el-input v-model="form.label" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="auto">
            <template>
              <el-radio v-model="form.dictStatus" label="0">启用</el-radio>
              <el-radio v-model="form.dictStatus" label="1">停用</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";

let id = 1000;

export default {
  data() {
    return {
      data: [],
      form: {},
      dialogFormVisible: false,
    }
  },

  created() {
    this.handList()
  },
  methods: {
    onOpen(){
      this.form = {
        level: '1',
      }
      this.dialogFormVisible =true
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true
      this.form = row
    },
    // todo 待修复
    handleSave() {
      axios
        // 3.1url地址
        .post("http://localhost:18080/elk-dict/dict/save", this.form)
        // 3.2成功时回调函数
        .then((data) => {
          console.log(data.data.data)
          if (data.data.data) {
            this.handList()
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '添加失败',
              type: 'fail'
            })
          }
        })
        //3.3失败时回调函数
        .catch((err) => {
          console.log(err);
        });
      this.dialogFormVisible = false
      this.form = {}
    },
    handleDelete(index, row) {
      console.log(index, row);
      axios
        // 3.1url地址
        .delete("http://localhost:18080/elk-source-data/eDataSource/" + row.id)
        // 3.2成功时回调函数
        .then((data) => {
          console.log(data.data.data)
          if (data.data.data) {
            this.handleList()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '删除失败',
              type: 'fail'
            })
          }
        })
        //3.3失败时回调函数
        .catch((err) => {
          console.log(err);
        });
    },
    append(data) {
      console.log(data)
      this.form.level = data.dict_level
      this.form.pid = data.id
      this.form.search = data.search
      this.dialogFormVisible = true
    },

    remove(node, data) {
      console.log(data)
      axios
        // 3.1url地址
        .delete("http://localhost:18080/elk-dict/dict/" + data.id)
        // 3.2成功时回调函数
        .then((data) => {
          console.log(data.data)
          if (data.data.data) {
            this.handList()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '删除失败',
              type: 'fail'
            })
          }
        })
        //3.3失败时回调函数
        .catch((err) => {
          console.log(err);
        });
    },

    renderContent(h, {node, data, store}) {
      return (
        <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button  type="text" on-click={() => this.append(data)}>添加子数据</el-button>
              <el-button  type="text" on-click={() => this.remove(node, data)}>删除</el-button>
            </span>
          </span>);
    },
    handList() {
      axios
        // 3.1url地址
        .get("http://localhost:18080/elk-dict/dict/list")
        // 3.2成功时回调函数
        .then((data) => {
          console.log(data.data.data)
          this.data = data.data.data
        })
        //3.3失败时回调函数
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
